<template>
	<view class="b_width hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">客户详情</view>
				</view>
			</u-navbar>
		</view>
		<view class="form_box">
			<view class="xx_box">
				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">姓名</view>
					</view>
					<input disabled v-model="info.nickname"  placeholder-style="color:#C2C7CE"></u--input>
				</view>

				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						
						<view class="">手机号</view>
					</view>
					<input v-model="info.mobile" disabled  placeholder-style="color:#C2C7CE"></u--input>
				</view> 

				<view  class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">用户类型</view>
					</view>
					<input v-model="info.groups.name" disabled  placeholder-style="color:#C2C7CE"></u--input>
				</view>
				
				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						<view class="">店铺或公司名称</view>
					</view>
					<input disabled v-model="info.shop_name" placeholder-style="color:#C2C7CE"></u--input>
				</view>

				<view class="input_box b_flex_c">
					<view class="b_flex_c left">
						
						<view class="">所属区域</view>
					</view>
					<input disabled v-model="info.province+info.city+info.area"  placeholder-style="color:#C2C7CE" />
				</view>


				<view class="b_flex_c input_box">
					<view class="b_flex_c left">
						
						<view class="">详细地址</view>
					</view>
					<input v-model="info.address" disabled placeholder-style="color:#C2C7CE"></u--input>
				</view>

				<view class="input_box">
					<view class="bz_box b_flex_c">
						<view>头像</view>
					</view>
					<view class="upload_box">
						<image @click="setOpen" :src="info.avatar" class="img"></image>
					</view>
				</view> 
			</view>
			
		</view>
	</view>
</template>

<script>
	import { teamInfo } from '@/require/api';
	export default {
		data() {
			return {
				params:{id:''},
				info:''
			}
		},
		onLoad(data) {
			if(data.id){
				this.params.id=data.id;
			}
			this.getInfo();
		},
		onShow() {
			
		},
		methods: {
			setOpen(){
			   uni.previewImage({
			   	urls:[this.info.avatar]
			   });	
			},
			async getInfo(){
				
				let {code,data}=await teamInfo(this.params);
				if(code==1){
					if(data.avatar){
						data.avatar=this.$imgUrl+data.avatar;
					}
					this.info=data;
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
	
		
	}
	
	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}
	
	.b_width {
		width: 100%;
	}

	.hui {
		background: #F4F4F4;
		min-height: 100vh;
	}

	.form_box {
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
	}

	.xx_box {
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 30rpx;
	}

	.bz_box {

		box-sizing: border-box;
		padding: 0 0 25rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.input_box {
		box-sizing: border-box;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EFEFEF;
	}

	.upload_box {
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
	}

	.b_flex_c {
		display: flex;
		align-items: center;
	}

	.b_red {
		color: red;
	}

	.b_f_w {
		font-weight: bold;
	}

	.xing {
		width: 18rpx;
		box-sizing: border-box;
		padding: 10rpx 0 0 0;
	}

	.left {
		width: 33%;
	}

   .tc_box{
	   width: 50%;
	   text-align: center;
   }

	.sumbit {
		margin-top: 20rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #13AE67;
		color: #fff;
		border-radius: 30rpx;
	}

	.map_box {
		font-size: 30rpx;
	}

	.shen_box {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}
	.img{
		width: 180rpx;
		height: 180rpx;
	}
</style>